<template>
    <div class="myCollection-container">
        <!-- 面包屑 -->
        <Breadcrumb>
            <BreadcrumbItem to="/userHome">个人中心</BreadcrumbItem>
            <BreadcrumbItem>我的收藏</BreadcrumbItem>
        </Breadcrumb>
        <div class="myCollection-info">
            <Tabs value="name1">
                <!-- 我的收藏列表 -->
                <TabPane label="宝贝" name="name1">
                    <!-- 收藏宝贝为空时显示 -->
                    <div class="hasMsg" v-if="goodsList==''">
                        <a-empty style="padding-top:70px;"></a-empty>
                    </div>
                    <!-- 收藏宝贝不为空时显示 -->
                    <div class="hasMsg" v-else>
                        <div class="myCollection-list">
                            <div class="myCollection-item" v-for="(item,i) in goodsList" :key="i">
                                <div class="item-left">
                                    <!-- 商品主图 -->
                                    <router-link :to="'/goodsInfo/' + item.gcGid"><img :src="item.mainPic" alt=""></router-link>
                                    <div class="userinfo">
                                        <p><router-link :to="'/goodsInfo/' + item.gcGid" class="goods-title">{{item.goods.gTitle}}
                                        </router-link></p>
                                        <p><router-link :to="'/userInfo/' + item.goods.gUid">{{item.uName}}</router-link>
                                        <span class="col-time">收藏于：{{item.gcTime | dataFormat}}</span></p>
                                    </div>
                                </div>
                                <div class="item-right">
                                    <a href="javascript:void(0);" @click.prevent="deleteById(item.gcId)"><Icon type="md-star" /> 取消收藏</a>
                                </div>
                            </div>
                        </div>
                        <div class="page-all">
                            <Page :total="allPages.total" :page-size="pageSize" :current="pageNumOne" @on-change="changePage"  />
                        </div>
                    </div>
                </TabPane>
                <TabPane label="求购" name="name2">
                    <!-- 收藏求购宝贝为空时显示 -->
                    <div class="hasMsg" v-if="wantGoodsList==''">
                        <a-empty style="padding-top:70px;"></a-empty>
                    </div>
                    <!-- 收藏求购宝贝不为空时显示 -->
                    <div class="hasMsg" v-else>
                        <div class="myCollection-list">
                            <div class="myCollection-item" v-for="item in wantGoodsList" :key="item.wgcWgid">
                                <div class="item-left">
                                    <!-- 商品主图 -->
                                    <router-link :to="'/wantGoodsInfo/' + item.wgcWgid"><img :src="item.mainPic" alt=""></router-link>
                                    <div class="userinfo">
                                        <p><router-link :to="'/wantGoodsInfo/' + item.wgcWgid" class="goods-title">
                                        {{item.wantGoods.wgTitle}}
                                        </router-link></p>
                                        <p><router-link :to="'/userInfo/' + item.wantGoods.wgUid">{{item.uName}}</router-link>
                                        <span class="col-time">收藏于：{{item.wgcTime | dataFormat}}</span></p>
                                    </div>
                                </div>
                                <div class="item-right">
                                    <a href="javascript:void(0);" @click.prevent="deleteWantById(item.wgcId)"><Icon type="md-star" />
                                    取消收藏</a>
                                </div>
                            </div>
                        </div>
                        <div class="page-all">
                            <Page :total="allWantPages.total" :page-size="pageSize" :current="pageNumTwo" @on-change="changeWantPage"  />
                        </div>
                    </div>
                </TabPane>
            </Tabs>
        </div>
    </div>
</template>

<script>
export default {
  name: 'myCollection',
  data () {
    return {
      id: JSON.parse(localStorage.getItem('user')).uId,
      goodsList: [], // 收藏商品列表
      pageSize: 4, // 每页显示多少条
      allPages: [], // 存放收藏商品分页的信息
      pageNumOne: 1, // 默认展示收藏第一页数据
      wantGoodsList: [], // 求购收藏商品列表
      allWantPages: [], // 存放求购收藏商品分页的信息
      pageNumTwo: 1 // 默认展示求购收藏第一页数据
    }
  },
  created () {
    this.findByUserId()
    this.findByWantUserId()
  },
  methods: {
    // 根据用户id查看该用户收藏的商品列表
    findByUserId () {
      this.$axios({
        url: 'goodsCollection/findByUserId',
        method: 'get',
        params: {
          gcUid: this.id,
          pageNo: this.pageNumOne,
          pageSize: this.pageSize
        },
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.goodsList = res.data.pageInfo.list
          this.allPages = res.data.pageInfo
          // 查找商品主图
          this.goodsList.forEach(item => {
            this.$axios({
              url: 'goodsPicture/findMainPicByGoodsId/' + item.gcGid,
              method: 'get'
            }).then(res => {
              if (res.data.code === 200) {
                // vue给对象新增属性并触发视图更新
                this.$set(item, 'mainPic', res.data.object.gpAddress)
              }
            }).catch(error => {
              console.log(error)
            })
          })
          // 查找商品发布者
          this.goodsList.forEach(item => {
            this.$axios({
              url: 'users/findById/' + item.goods.gUid,
              method: 'get',
              headers: {
                Authorization: localStorage.getItem('token')
              }
            }).then(res => {
              if (res.data.code === 200) {
                // vue给对象新增属性并触发视图更新
                this.$set(item, 'uName', res.data.object.uName)
              }
            }).catch(error => {
              console.log(error)
            })
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 分页改变收藏的商品页码
    changePage (index) {
      // 加载更多，页码改变的回调，返回改变后的页码
      this.pageNumOne = index
      this.findByUserId()
    },
    // 根据收藏id删除（取消）此商品收藏
    deleteById (id) {
      this.$axios({
        url: 'goodsCollection/deleteById/' + id,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.findByUserId()
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 根据用户id查看该用户收藏的求购商品列表
    findByWantUserId () {
      this.$axios({
        url: 'wantGoodsCollection/findByUserId',
        method: 'get',
        params: {
          wgcUid: this.id,
          pageNo: this.pageNumTwo,
          pageSize: this.pageSize
        },
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.wantGoodsList = res.data.pageInfo.list
          this.allWantPages = res.data.pageInfo
          // 查找求购商品主图
          this.wantGoodsList.forEach(item => {
            this.$axios({
              url: 'wantGoodsPicture/findMainPicByGoodsId/' + item.wgcWgid,
              method: 'get'
            }).then(res => {
              if (res.data.code === 200) {
                // vue给对象新增属性并触发视图更新
                this.$set(item, 'mainPic', res.data.object.wgpAddress)
              }
            }).catch(error => {
              console.log(error)
            })
          })
          // 查找求购商品发布者
          this.wantGoodsList.forEach(item => {
            this.$axios({
              url: 'users/findById/' + item.wantGoods.wgUid,
              method: 'get',
              headers: {
                Authorization: localStorage.getItem('token')
              }
            }).then(res => {
              if (res.data.code === 200) {
                // vue给对象新增属性并触发视图更新
                this.$set(item, 'uName', res.data.object.uName)
              }
            }).catch(error => {
              console.log(error)
            })
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 分页改变收藏的求购商品页码
    changeWantPage (index) {
      // 加载更多，页码改变的回调，返回改变后的页码
      this.pageNumTwo = index
      this.findByWantUserId()
    },
    // 根据收藏id删除（取消）此求购商品收藏
    deleteWantById (id) {
      this.$axios({
        url: 'wantGoodsCollection/deleteById/' + id,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.findByWantUserId()
        }
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>
.page-all{
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}
.myCollection-container {
    min-height: 480px;
}
.myCollection-info {
    margin-top: 50px;
}
.myCollection-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e8eaec;
    padding: 10px;
}
.item-left {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    max-width:73%;
}
.item-left img {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    margin-right: 10px;
}
.userinfo {
    max-width:90%;
}
.userinfo p {
    margin-bottom: 0;
}
.userinfo .goods-title {
    display: block;
    color:#515a6e;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    font-size: 15px;
}
.userinfo .goods-title:hover {
    color: #2d8cf0;
}
.userinfo a {
    color:#515a6e;
    font-size: 12px;
}
.item-right a {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 20px;
    color: #515a6e;
    border: 1px solid #515a6e;
    font-size: 12px;
}
.col-time {
    margin-left: 10px;
    font-size: 12px;
}
</style>
